<template>
	<view class="ui_tag" v-if="isShow" :class="item.type || 'default'" :style="{ paddingRight: item.close ? 0 : 10 / 23.44 + 'rem' }" @click="closeHandle">
		<view class="ui_tag_text">{{ item.text }}</view>
		<view class="iconfont icon-close" v-if="item.close"></view>
	</view>
</template>
<script>
export default {
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		}
	},
	data() {
		return {
			isShow: true
		};
	},
	methods: {
		closeHandle() {
			if (this.$props.item.close && this.$props.item.close === true) this.isShow = false;
		}
	}
};
</script>
<style lang="less">
.ui_tag {
	display: flex;
	padding: 5rpx 10rpx;
	font-size: 24rpx;
	line-height: 34rpx;
	border-radius: 10rpx;
	&.primary {
		color: #ffffff;
		background-color: #07c160;
		border: 1px solid #07c160;
		.iconfont {
			color: #ffffff;
		}
	}
	&.info {
		color: #ffffff;
		background-color: #1989fa;
		border: 1px solid #1989fa;
		.iconfont {
			color: #ffffff;
		}
	}
	&.default {
		color: #323233;
		background-color: #ffffff;
		border: 1px solid #efefef;
		.iconfont {
			color: #323233;
		}
	}
	&.warning {
		color: #ffffff;
		background-color: #ff0033;
		border: 1px solid #ff0033;
		.iconfont {
			color: #ffffff;
		}
	}
	&.danger {
		color: #ffffff;
		background-color: #ff976a;
		border: 1px solid #ff976a;
		.iconfont {
			color: #ffffff;
		}
	}
	&.default {
		color: #ffffff;
		background-color: #1989fa;
		border: 1px solid #1989fa;
		.iconfont {
			color: #ffffff;
		}
	}
	.ui_tag_text {
		flex: 1;
		text-align: center;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
	.iconfont {
		font-size: 24rpx;
		padding: 0 10rpx;
		line-height: 40rpx;
	}
}
</style>
